<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Password Manager Test</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }
    .tabs {
      margin-bottom: 1em;
    }
    .tab-buttons {
      display: flex;
    }
    .tab-buttons button {
      padding: 0.5em 1em;
      margin-right: 0.5em;
      border: 1px solid #ccc;
      background: #f9f9f9;
      cursor: pointer;
    }
    .tab-buttons button.active {
      background: #e9e9e9;
      border-bottom: 2px solid #333;
    }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }
    .input-with-button {
      position: relative;
      display: inline-block;
    }
    .input-with-button input {
      padding-right: 2.5em;
    }
    .input-with-button button {
      position: absolute;
      right: 0.25em;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="tabs">
    <div class="tab-buttons">
      <button data-tab="username-only" class="active">Username Only</button>
      <button data-tab="password-only">Password Only</button>
      <button data-tab="password-toggle">Password Toggle</button>
      <button data-tab="username-password">Username & Password</button>
    </div>
    <br/>
    <div id="username-only" class="tab-content active">
      <label for="user1">Username:</label>
      <input type="text" id="user1" autocomplete="username">
    </div>
    <div id="password-only" class="tab-content">
      <label for="pass1">Password:</label>
      <input type="password" id="pass1">
    </div>
    <div id="password-toggle" class="tab-content">
      <label for="pass2">Password:</label>
      <div class="input-with-button">
        <input type="password" id="pass2">
        <button type="button" id="togglePass">Show</button>
      </div>
    </div>
    <div id="username-password" class="tab-content">
      <label for="user2">Username:</label>
      <input type="text" id="user2" autocomplete="username">
      <br><br>
      <label for="pass3">Password:</label>
      <input type="password" id="pass3">
    </div>
  </div>
  <script>
    const tabs = document.querySelectorAll('.tab-buttons button');
    for (let btn of tabs) {
      btn.addEventListener('click', function() {
        for (let b of tabs) {
          b.classList.remove('active');
        }
        btn.classList.add('active');
        const contents = document.querySelectorAll('.tab-content');
        for (let c of contents) {
          c.classList.remove('active');
        }
        const activeTab = document.getElementById(btn.getAttribute('data-tab'));
        activeTab.classList.add('active');
      });
    }
    const toggleBtn = document.getElementById('togglePass');
    toggleBtn.addEventListener('click', function() {
      const input = document.getElementById('pass2');
      if (input.type === 'password') {
        input.type = 'text';
        toggleBtn.textContent = 'Hide';
      } else {
        input.type = 'password';
        toggleBtn.textContent = 'Show';
      }
    });
  </script>
</body>
</html>
